<template>
	<div>
		<button @click="renderScript.emitData">直接调用renderjs中的emitData的方法</button>
		<div id="content_map">
		</div>
	</div>
</template>
<script>
	import oneMapOption, {
		tdtChina_token,
		tdtSD_urls,
	} from '@/utils/gis/dictionary'
	export default {
		data() {
			return {
				tdtImgLayerGroup: [],
				tdtVecLayerGroup: [],
				tdtDarkLayerGroup: [],
				L: ''
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			// 初始地图
			initTdtLayer(baseMapType = false, mapObj, tdtChina_token) {
				// 加载天地图世界底图
				let tdtWordImgLayerGroup = new L.supermap.TiandituTileLayer({
					layerType: 'img',
					key: tdtChina_token
				}).addTo(mapObj)
				/**
				 * 【天地图山东】影像图层
				 */
				this.tdtImgLayerGroup = L.layerGroup([])

				/**
				 * 【天地图山东】矢量图层
				 */
				this.tdtVecLayerGroup = L.layerGroup([])

				/**
				 * 【天地图山东】暗色图层
				 */
				this.tdtDarkLayerGroup = L.layerGroup([])

				//【天地图山东】影像图层
				const tdtSDimg_Layer = L.supermap.tiandituTileLayer({
					url: tdtSD_urls.img_url,
					attributes: {
						title: '【天地图山东】影像图层',
						name: 'tdtSDimg_Layer'
					}
				})
				this.tdtImgLayerGroup.addLayer(tdtSDimg_Layer)

				//【天地图山东】影像注记图层
				const tdtSDzj_Layer = L.supermap.tiandituTileLayer({
					url: tdtSD_urls.zj_url,
					isLabel: true,
					attributes: {
						title: '【天地图山东】影像注记图层',
						name: 'tdtSDzj_Layer'
					}
				})
				this.tdtImgLayerGroup.addLayer(tdtSDzj_Layer)

				//【天地图山东】矢量图层
				const tdtSDvec_Layer = L.supermap.tiandituTileLayer({
					url: tdtSD_urls.vec_url,
					attributes: {
						title: '【天地图山东】矢量图层',
						name: 'tdtSDvec_Layer'
					}
				})
				this.tdtVecLayerGroup.addLayer(tdtSDvec_Layer)

				//【天地图山东】暗色图层
				const tdtSDdark_Layer = L.supermap.tiandituTileLayer({
					url: tdtSD_urls.vec_dark_url,
					attributes: {
						title: '【天地图山东】暗色图层',
						name: 'tdtSDdark_Layer'
					}
				})
				this.tdtDarkLayerGroup.addLayer(tdtSDdark_Layer)

				//判断底图初始图层类型
				switch (baseMapType) {
					case 1:
						this.mapSwitchClick('img')
						break
					case 2:
						this.mapSwitchClick('vec')
						break
					case 3:
						this.mapSwitchClick('dark')
						break
				}
				//底图加载到地图上
				this.tdtImgLayerGroup.addTo(mapObj)
				this.tdtVecLayerGroup.addTo(mapObj)
				this.tdtDarkLayerGroup.addTo(mapObj)
			},
			// 判断展示哪一个图层
			mapSwitchClick(type) {
				if ('vec' === type) {
					//矢量
					this.showLayerGroup(this.tdtVecLayerGroup)
					this.hideLayerGroup(this.tdtImgLayerGroup)
					this.hideLayerGroup(this.tdtDarkLayerGroup)
				} else if ('img' === type) {
					//影像
					this.showLayerGroup(this.tdtImgLayerGroup)
					this.hideLayerGroup(this.tdtVecLayerGroup)
					this.hideLayerGroup(this.tdtDarkLayerGroup)
				} else if ('dark' === type) {
					//暗色
					this.showLayerGroup(this.tdtDarkLayerGroup)
					this.hideLayerGroup(this.tdtVecLayerGroup)
					this.hideLayerGroup(this.tdtImgLayerGroup)
				}
			},
			// 展示图层
			showLayerGroup(layerGroup) {
				layerGroup.eachLayer(function(layer) {
					layer.setOpacity(1)
				})
			},
			// 隐藏图层
			hideLayerGroup(layerGroup) {
				layerGroup.eachLayer(function(layer) {
					layer.setOpacity(0)
				})
			},
			// 加载地市范围
			filterMapMaskByMapService(map) {
				let mapUrl = "http://120.224.9.6:8090/iserver/services/map-SDYZT_DATA/rest/maps/SDYZT_ZZ_AS"
				let code = "370800"
				let mapLevel = "ds"
				let layerStatusList = []
				// 地市边界
				let layerStatus0 = new L.supermap.LayerStatus({
					layerName: 'SDYZT_AD_GIS_X@SDYZT_DATA',
					isVisible: true,
					displayFilter: this.dsBjFunction(code)
				})
				layerStatusList.push(layerStatus0)

				// 地市以外的面
				let layerStatus1 = new L.supermap.LayerStatus({
					layerName: 'SDYZT_AD_GIS_R@SDYZT_DATA',
					isVisible: true,
					displayFilter: this.outsideBjFunction(mapLevel, code)
				})
				layerStatusList.push(layerStatus1)

				// 省外的面
				let layerStatus2 = new L.supermap.LayerStatus({
					layerName: 'SDYZT_ZZ_GIS@SDYZT_DATA',
					isVisible: true
				})
				layerStatusList.push(layerStatus2)
				let layerStatusParameters = new L.supermap.SetLayerStatusParameters({
					layerStatusList: layerStatusList
				})

				let layerInfoService = new L.supermap.LayerInfoService(mapUrl).setLayerStatus(layerStatusParameters, (e) => {
					let tempLayerID = e.result.newResourceID
					let xzqhBjLayer = new L.supermap.ImageMapLayer(mapUrl, {
						layersID: tempLayerID,
						zIndex: 999,
						transparent: true,
						format: 'png',
						opacity: '0.6'
					}).addTo(map)
					xzqhBjLayer.id = 'xzqhBjLayer'
				})
			},

			// 返回地市边界 code
			dsBjFunction(code) {
				if (code == '370611') {
					// 门楼                   门楼边界二
					return `ID ='${code}' or ID='${370686}' `
				} else {
					return `ID ='${code}'`
				}
			},
			// 返回地势以外的 面
			outsideBjFunction(mapLevel, code) {
				console.log(mapLevel)
				if (mapLevel == 'ds') {
					if (code == '370611') {
						return `TYPE ='${mapLevel}' and CITY_ID <> '${code}'  and CITY_ID <> '${370686}'`
					} else {
						return `TYPE ='${mapLevel}' and CITY_ID <> '${code}'`
					}
				} else {
					if (code == '370611') {
						return `TYPE ='${mapLevel}' and AREA_ID <> '${code}'  and AREA_ID <> '${370686}'`
					} else {
						return `TYPE ='${mapLevel}' and AREA_ID <> '${code}'`
					}
				}
			},
			initAAA(leaflet) {
				console.log('renderjs返回的值--> leaflet', leaflet);
				const L = this.L
				console.log('renderjs返回的值--> L', L);
				let mapOptions = {
					"center": ["35.38", "116.59"],
					"zoom": "8",
					"minZoom": "5"
				}
				let map = L.map("content_map", {
					center: mapOptions.center,
					zoom: mapOptions.zoom,
					minZoom: mapOptions.minZoom,
					crs: L.supermap.CRS.TianDiTu_WGS84,
					//缩放控件
					zoomControl: false,
					//版权控件
					attributionControl: false,
					preferCanvas: true,
					doubleClickZoom: false
				})
				const tdtChina_token = '1d109683f4d84198e37a38c442d68311'
				// this.initTdtLayer( 1, map, tdtChina_token)

				// this.filterMapMaskByMapService( map)
			},
			// 接收renderjs发回的数据
			receiveRenderData(leafletObj) {
				// console.log('renderjs返回的值-->', val);
				debugger
				console.log('renderjs返回的值-->leaflet', leafletObj);
				// this.initAAA(this.L)
			},
		},
		mounted() {
			// let mapOptions = {
			// 	"center": ["35.38", "116.59"],
			// 	"zoom": "8",
			// 	"minZoom": "5"
			// }
			// let map = L.map("content_map", {
			// 	center: mapOptions.center,
			// 	zoom: mapOptions.zoom,
			// 	minZoom: mapOptions.minZoom,
			// 	crs: L.supermap.CRS.TianDiTu_WGS84,
			// 	//缩放控件
			// 	zoomControl: false,
			// 	//版权控件
			// 	attributionControl: false,
			// 	preferCanvas: true,
			// 	doubleClickZoom: false
			// })
			// const tdtChina_token = '1d109683f4d84198e37a38c442d68311'
			// this.initTdtLayer(1, map, tdtChina_token)

			// this.filterMapMaskByMapService(map)
		}
	}
</script>

<script module="renderScript" lang="renderjs">
	import L from '@/static/js/leaflet/leaflet.js'
	import '@/static/js/leaflet/iclient-leaflet.min.js'
	import '@/static/js/leaflet/AnimatedMarker.js'
	export default {
		data() {
			return {
				name: '我是renderjs数据',
			}
		},
		methods: {
			renferMsg(event, ownerInstance) {
				// 调用 service层的serviceClick方法,传值
				console.log(event, ownerInstance)
				ownerInstance.callMethod('serviceClick', {
					test: '这是点击renderjs的区域，向service层传递变量'
				})
			},
			// 接收逻辑层发送的数据
			receiveMsg(newValue, oldValue, ownerVm, vm) {
				// console.log('msg变化了newValue', newValue)
				// console.log('msg变化了oldValue', oldValue)
				// console.log('msg变化了ownerVm', ownerVm)
				// console.log('msg变化了vm', vm)
			},
			// 发送数据到逻辑层
			emitData(e, ownerVm) {
				const script = document.createElement('script')
				script.src = '@/static/js/leaflet/leaflet.js'
				script.onload = this.init
				document.head.appendChild(script) //全局挂载echarts.min.js
				console.log("emitData -L", L)
				const leafletObj = {
					...L
				}
				ownerVm.callMethod('receiveRenderData', leafletObj)
			},
		}
	};
</script>
<style>
	#content_map {
		width: 100vw;
		height: 50vh;
		background-color: pink;
	}
</style>